<template>
  <div style="min-height: 40rem">
    <div class="all-icon-container" v-for="oneLevel in list" :key="oneLevel.id">
      <div class="icon-container">
        <div class="theme">
          {{ oneLevel.name }}
        </div>
        <div class="icon-and-download">
          <template v-for="item in oneLevel.children" :key="item">
            <IconAndDown :name="item.name" :url="item.downloadUrl" :illustrate="item.description" :type="item.type"
                         :docId="item.documentId" :icon="item.realFileUrl"/>
          </template>
        </div>
      </div>
      <el-divider/>
    </div>
  </div>

</template>
<script>
import IconAndDown from '@/components/homeIndex/IconAndDown.vue'
import FrontApi from '@/api/front'
import {inject, reactive, toRefs} from 'vue'

export default {
  name: 'SolutionContext',
  components: {IconAndDown},
  setup() {
    let data = reactive({
      list: [],
    })
    const show = inject('show')
    FrontApi.getComponentList("3").then(res => {
      data.list = res.data
      show.value=true
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>
<style scoped>
.all-icon-container {
  margin: 4rem 24rem;
}

.icon-container {
  min-height: 35.51%;
}

.theme {
  font-weight: bold;
  color: var(--el-text-color-regular);
  font-size: 2.6rem;
}

.icon-and-download {
  margin-top: 4.8rem;
  display: flex;
  flex-wrap: wrap;
}

.icon-and-download-block {
  width: 33.33%;
  margin-bottom: 8rem;
}

.el-divider {
  margin: 0rem 1rem 8rem 1rem;
}
</style>